<template>
	<view class="reply">
		<view class="top">
			<comment-item :closeBtn="true" :childStatus="true" :item="item"></comment-item>
		</view>
		<view class="list">
			<view class="row" v-for="item in commentList">
				<comment-item :childStatus="true" :item="item" @removeFun="commentChange"></comment-item>
			</view>
		</view>
		<view class="">
			<comment-frame :placeholder="`回复 ${giveName(item)}`" :commentObj="commentObj"
				@commentChange='commentChange'></comment-frame>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	import {
		giveName
	} from '../../utils/tools.js';
	export default {
		data() {
			return {
				item: {},
				commentObj: {
					article_id: '', //文章ID
					comment_type: 1,
					reply_user_id: "", //被回复的评论用户ID，
					reply_comment_id: "" //被回复的评论ID
				},
				commentList: []
			};
		},
		methods: {
			giveName,
			// 删除 和 发布 同步用一个方法
			commentChange() {
				this.commentList = []
				this.getCcomment()
			},
			// 获取二级评论
			async getCcomment() {
				let commentTemp = db.collection('quanzi-comment').where(
					`article_id=='${this.item.article_id}' && comment_type==1 && reply_comment_id=='${this.item._id}'`
				).orderBy('comment_date desc').limit(
					10).getTemp();
				let userTemp = db.collection('uni-id-users').field('_id,username,avatar_file,nickname').getTemp();
				let res = await db.collection(commentTemp, userTemp).get();
				console.log(res, '评论');

				this.commentList = res.result.data;
			},
		},
		onLoad(e) {
			let replyItem = uni.getStorageSync('replyItem');
			if (!replyItem) {
				uni.navigateBack();
				return;
			}
			this.item = JSON.parse(replyItem || {});
			this.commentObj.article_id = this.item.article_id
			this.commentObj.reply_user_id = this.item.user_id[0]._id
			this.commentObj.reply_comment_id = this.item._id
			this.getCcomment()
		},
		onUnload() {
			uni.removeStorageSync('replyItem');
		}
	};
</script>

<style lang="scss">
	.reply {
		.top {
			padding: 30rpx;
			border-bottom: 15rpx solid #eee;
		}

		.list {
			padding: 30rpx;
			padding-bottom: 120rpx;

			.row {
				padding-bottom: 15rpx;
			}
		}
	}
</style>